<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
    String appPath = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Picture</title>
<link rel="stylesheet" href="<%=appPath %>/page/css/style.css" type="text/css"
	media="screen" />
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana;
	padding: 50px;
	background: #f0f0f0 url('<%=appPath %>/page/images/title.png') no-repeat top left;
}

a.back {
	background: transparent url('<%=appPath %>/page/images/back.png') no-repeat top left;
	position: fixed;
	width: 150px;
	height: 27px;
	outline: none;
	top: 0px;
	right: 0px;
}

#content {
	width: 700px;
	height: 350px;
	margin: 120px auto 0px auto;
}

h1 {
	color: #363C85;
	text-shadow: 1px 1px 1px #fff;
	font-weight: normal;
	letter-spacing: -2px;
}

p {
	text-transform: uppercase;
	text-shadow: -1px 1px 1px #fff;
	color: #666;
	text-decoration: none;
	font-size: 13px;
	line-height: 20px;
	padding-top: 4px;
	margin-left: 10px;
}
</style>
</head>

<body>
	<div id="mG3" class="microGallery">
		<img src="<%=appPath %>/page/images/1.JPG" alt="The Atlantic!" /> 
		<img src="<%=appPath %>/page/images/2.JPG" alt="Almost White Sand!" /> 
		<img src="<%=appPath %>/page/images/3.JPG" alt="Empty Beach" /> 
		<img src="<%=appPath %>/page/images/4.JPG" alt="A Boat" /> 
		<img src="<%=appPath %>/page/images/5.JPG" alt="The Rocks" /> 
	</div>
</body>

<script type="text/javascript"
	src="<%=appPath%>/page/jslib/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="<%=appPath%>/page/js/jquery.microgallery.js"></script>
<script type="text/javascript">
	$(function() {

		$("#mG1").microgallery( {
			menu : true,
			size : 'small',
			mode : 'single'
		});
		$("#mG2").microgallery( {
			menu : false,
			size : 'medium',
			mode : 'thumbs',
			cycle : true
		});
		$("#mG3").microgallery( {
			menu : true,
			size : 'large',
			mode : 'single',
			cycle : true,
			autoplay : true, /* the autoplay can only exist if circular is true */
			autoplayTime : 2000
		});

	});
</script>
</html>
